<template>
    <view class="containers">
        <view class="category_nav"   >
            <view class="category">
                <view @click="getUserTask(1)" :class="task_index==1?'category-item active':'category-item'">
                    已接单
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==1?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(2)" :class="task_index==2?'category-item active':'category-item'">
                    待审核
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==2?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(-1)" :class="task_index==-1?'category-item active':'category-item'">
                    已拒绝
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==-1?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(3)" :class="task_index==3?'category-item active':'category-item'">
                    已结算
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==3?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="taskList" v-for="(item,index) in list" :key="index" v-if="item.status == task_index">
            <view style="width: 22%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 8rpx;" v-if="item.status == 3">
                <img src="https://oa.yuxiang123.cn/assets/task/xhs.png"   mode="widthFix" style="width: 70%;">
            </view>
            <view style="width: 22%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30rpx;" v-else-if="item.status == -1">
                <img src="https://oa.yuxiang123.cn/assets/task/xhs.png"   mode="widthFix" style="width: 70%;">
            </view>
            <view style="width: 22%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
          " v-else>
                <img src="https://oa.yuxiang123.cn/assets/task/xhs.png"   mode="widthFix" style="width: 70%;">
            </view>
            <view style="width: 53%;z-index: 100;"  v-if="item.status==1 || item.status==-1"  @click="toPages('/subone/user/distribute_task_detail?id='+item.id+'&time1='+item.time1)">
                <view class="taskTitle">
                    {{item.title}}
                </view>
                <view style="font-size: 26rpx;color: red;" v-if="item.status==3">
                    +¥{{item.price}}
                </view>
                <view style="font-size: 26rpx;color: #333;" v-else>
                    {{item.priceName}}
                    <text v-if="item.status==1 && item.is_illegal == 1" style="color: red;margin-left: 15rpx;font-size: 24rpx;">(违规申请已提交)</text>
                    <text v-if="item.status==1 && item.is_illegal == 2" style="color: red;margin-left: 15rpx;font-size: 24rpx;">(违规已处理)</text>
                </view>
                <view v-if="item.status == 3" style="color: #666;
                font-size: 24rpx;
                margin-top: 8rpx;">
                    {{item.complete_time}}
                </view>
            </view >
            <view style="width: 53%;z-index: 100;"  v-else>
                <view class="taskTitle">
                    {{item.title}}
                </view>
                <view style="font-size: 26rpx;color: red;" v-if="item.status==3">
                    +¥{{item.price}}
                </view>
                <view style="font-size: 26rpx;color: #333;" v-else>
                    {{item.priceName}}
                </view>
                <view v-if="item.status == 3" style="color: #666;
                font-size: 24rpx;
                margin-top: 8rpx;">
                    {{item.complete_time}}
                </view>
            </view >
            <view style="width:25%;z-index: 100;margin-top: 52rpx;">
                <view class="getTask" @click="toPages('/subone/user/distribute_task_detail?id='+item.id+'&time1='+item.time1)" v-if="item.status==1">查看详情</view>
                <view class="getTask" @click="toPages('/subone/user/distribute_task_detail?id='+item.id+'&time1='+item.time1)" v-if="item.status==-1">查看详情</view>
                <view class="getTask"  v-if="item.status==2">审核中</view>
            </view>
            <img v-if="item.status == -1" src="/static/del.svg" class="delImgs" @click="del(item.id,index)">
            <img v-if="item.status == 3"  src="/static/del.svg" class="delImgs1" @click="del(item.id,index)">
            <img src="https://oa.yuxiang123.cn/assets/task/bj.png"  style="width: 94%;position: absolute; height: 170rpx;">

        </view>
        <view class="nodata" v-if="bottom">到底了</view>
        <view class="nodata" v-if="bottom_1">暂无更多数据</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list:[],
            page:1,
            pagesize:20,
            task_index:1,
            bottom:false,
            bottom_1:false,
			userInfo:'',
        }
    },
    onLoad(p){
		this.userInfo=uni.getStorageSync('userInfo');
        this.token = uni.getStorageSync('token');
        if(p.task_index){
            this.task_index = p.task_index;
        }
        this.getTask();
    },
	onShow: async function () {

	},
    // 下拉刷新
    onPullDownRefresh() {
        let that = this;
        this.page=1;
        this.list.length=0;
        setTimeout(function () {
            that.getTask();
            uni.stopPullDownRefresh();
        }, 200);
    },
    onReachBottom() {
        this.page=++this.page;
        this.getTask_1();
    },
    methods: {
        del(id,index){
            var that  = this;
            uni.showModal({
                title: '提示',
                content: '是否删除？删除后该任务将消失！',
                success: function (res) {
                    if (res.confirm) {
                        //更新订单状态
                        that.$show();
                        uni.request({
                            url: 'https://oa.yuxiang123.cn/api/distribute_task/delTask',
                            header: {
                                "content-type": "application/x-www-form-urlencoded"
                            },
                            method: 'POST',
                            data:{
                                token:uni.getStorageSync('token'),
                                id:id,
                                status:-4,
                            },
                            success: (res) => {
                                if(res.data.code == 1){
                                    that.list[index].status = -4;
                                    that.$Toast('操作成功');
                                }else{
                                    that.$Toast('操作失败');
                                }
                            }
                        })
                    }
                }
            });
			
        },
        getUserTask(index){
            this.task_index=index;
            this.page=1;
            this.list.length=0;
            this.bottom=false;
            this.getTask();
        },
        getTask(){
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/distribute_task/userTaskList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:1,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = res.data.data;
                        if(res.data.data.length==0){
                            that.bottom_1=true;
                        }else{
                            that.bottom_1=false;
                        }
                    }
				}
			})		
        },
        getTask_1(){
            if(this.bottom == true){
                return false;
            }
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/distribute_task/userTaskList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:that.page,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = that.list.concat(res.data.data);
                        if(res.data.data.length<that.pagesize && that.page > 1){
                            that.bottom=true;
                        }else{
							that.bottom=false;
						}
                    }
				}
			})		
        },
        toPages:function(url,is_login = false){
			this.userInfo = uni.getStorageSync('userInfo');
			if(is_login && !this.userInfo){
				url='/subone/public/login';
			}
			console.log(url)
            if(url){
                uni.navigateTo({
                    url:url
                })
            }
        },
    }
}
</script>

<style lang="scss">
.delImgs{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -156rpx;
}
.delImgs1{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -185rpx;
}
.nodata{
    width:100%;
    height:100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color:#999;
}
.taskList{
	width: 94%;
	margin-left: 3%;
	border-radius: 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	height: 170rpx;
}
.taskTitle{
	font-size: 34rpx;
	font-weight: 600;
	line-height: 60rpx;
	margin-top: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.getTask{
	background: #FED43E;
	height: 65rpx;
	line-height: 65rpx;
	width: 160rpx;
	text-align: center;
	border-radius: 30rpx;
	
}






.hidden{
	display: none;
}
.show{
	display: inline-block;

}
.category_img{
	width: 46rpx;
}
.category_nav{}
.category_nav .category{height:80rpx; display: flex;align-items: center;justify-content: space-between;overflow-x: scroll;}
.category_nav .category .category-item{ text-align: center;font-size:28upx;white-space: nowrap;margin:0 35rpx;}
.category_nav .category .category-item.active{font-weight: bold;font-weight: 600;font-size:34upx;}
.category_nav .category::-webkit-scrollbar {  
display: none;  
width: 0 !important;  
height: 0 !important;  
-webkit-appearance: none;  
background: transparent;  
}

</style>

